<template>
    <div class="box">
        <div class="header">
            <img v-if="sex == 1" src="/images/man.png" alt="">
            <img v-if="sex == 0" src="/images/women.png" alt="">
            <div>姓名:{{name}}&nbsp;&nbsp;&nbsp;&nbsp;
                <!-- <span>职称:教授</span> -->
            </div>
            <div class="classRoom">所属班级:{{classRoom}}</div>
        </div>
        <div class="bottom student">
            <div>班主任:{{teach}}&nbsp;&nbsp;&nbsp;&nbsp;电话:150****6582</div>
            <div>家长:{{patriarch}}&nbsp;&nbsp;&nbsp;&nbsp;电话:150****6666</div>
            <div class="positon">最近打卡点:{{positon}}<img class="icon" src="/images/sousuo.png" alt=""></div>
            <div class="time">打卡时间:{{time}}</div>
        </div>
    </div>
</template>
<script setup>
    import { store } from "@/store/config.js"
    import { init } from "echarts"



defineProps({
    sex:init,
    name:String,
    classRoom:String,
    teach:String,
    patriarch:String,
    positon:String,
    time:String,

})

</script>

<style lang="less" scoped>
    .box{
        width: 100%;
        height: 170px;
        color: white;
        padding-top: 10px;
        letter-spacing: 1px;
        .header{
            img{
                height: 50px;
                width: auto;
                float: left;
                margin: 0px 5px 0px 5px;
            }
            >div{
                height: 25px;
                line-height: 25px;
                text-align: left;
                margin-left:70px;
            }
            .classRoom{
                color: #f49057;
            }
        }

        .bottom{
            padding-left: 10px;
            >div{
                height: 25px;
                line-height: 25px;
                text-align: left;
            }
            
            .positon{
                color: rgb(127, 255, 185);

            }
            .time{
                color: aquamarine;

            }
           .icon{
                width: 20px;
                height: auto;
                display: inline-block;
                position: relative;
                top: 3px;
                left: 3px;
           }
        }
    }


</style>